<script setup lang="ts">
// const
import { computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';

import { message, Modal } from 'ant-design-vue';

import { deleteBind1688ShopApi, setDefaultApp } from '#/api';
import { auto1688stor } from '#/store';

// 获取路由参数

// const route = useRoute();
const router = useRouter();

const auto1688storTres = auto1688stor();
// const { lodingGetShop } = auto1688storTres;
onMounted(() => {
  auto1688storTres.auto1688BindShop();
});
const columns1688 = [
  {
    title: '用户名',
    name: 'shopName',
    dataIndex: 'shopName',
    key: 'shopName',
    width: 260,
  },

  {
    title: '使用采购账号',
    name: 'isUseingName',
    dataIndex: 'isUseingName',
    key: 'isUseingName',
    width: 150,
  },

  {
    title: '应用版本',
    name: 'specVal',
    dataIndex: 'specVal',
    key: 'specVal',
    width: 200,
  },
  {
    title: '授权状态',
    name: 'status',
    dataIndex: 'status',
    key: 'status',
    width: 200,
  },

  {
    title: '到期时间',
    name: 'remainingTain',
    dataIndex: 'remainingTain',
    key: 'remainingTain',
    width: 300,
  },
  {
    title: '创建时间',
    name: 'createTime',
    dataIndex: 'createTime',
    key: 'createTime',
  },

  {
    title: '开通免密支付',
    name: 'isvOpenPay',
    dataIndex: 'isvOpenPay',
    key: 'isvOpenPay',
  },
  {
    title: '操作',
    name: 'action',
    dataIndex: 'action',
    key: 'action',
  },
];

const filter1688shoats = computed(() => auto1688storTres.auto1688.bindShopList);
const addShopIdList = computed(() => auto1688storTres.auto1688.addShopIdList);
const dataIn1688 = computed(() =>
  filter1688shoats.value?.filter((item) => item.pType === 1),
);

// 1688添加店铺
function toBuy1688App() {
  window.open(
    `https://pc.1688.com/product/detail.htm?productCode=PX5zozuThDu5UIbk2%2F4pFD6MU2rTc%2Btcj%2FavM9cjq6U%3D&productType=GROUP&spm=null`,
  );
}

function toOpen1688Pay() {
  Modal.confirm({
    title: '提示',
    content: '是否成功开通免密支付',
    okText: '已开通',
    cancelText: '开通失败',
    onOk() {
      auto1688storTres.lodingGetShop = false;
      auto1688storTres.auto1688BindShop();
    },
    onCancel() {},
  });
  window.open(
    `https://work.1688.com/?spm=a261p.2203641.recentmenu.dwithhold.72ce2abeRt53UE&_path_=buyer2017Base/2017buyerbase_trade/withhold-manage`,
  );
}

// 抖店铺货购买
function toDYPuHuoApp() {
  open(import.meta.env.VITE_APP_BUY_DOUDIAN_LINK);
}
// 抖店铺货授权
function toDYPuHuoSQ() {
  open(import.meta.env.VITE_APP_SHOUQUAN_LINK);
}

// 抖店下单购买
function toBuyDYXianDanApp() {
  open(import.meta.env.VITE_APP_XIADAN_LINK);
}

// 抖店下单授权
function toDYXianDanSQ() {
  open(import.meta.env.VITE_APP_XIADAN_SHOUQUAN_LINK);
}

function gotoMiandan() {
  open('https://fxg.jinritemai.com/ffa/logistics-project/eBill');
}

const puhuoAndOrder = [
  {
    title: '店铺',
    name: 'shopName',
    dataIndex: 'shopName',
    key: 'shopName',
    width: 260,
  },
  {
    title: '商品搬家服务',
    name: 'banjia',
    dataIndex: 'banjia',
    key: 'banjia',
    width: 260,
  },
  {
    title: '一键下单应用',
    name: 'xiadang',
    dataIndex: 'xiadang',
    key: 'xiadang',
    width: 260,
  },
];
function setMoren(item: any) {
  if (!item.isvOpenPay || item.isvOpenPay !== 1) {
    // message.error('请先开通免密支付');
    return Modal.confirm({
      title: '提示',
      content: '请先开通免密支付',
      okText: '去开通',
      cancelText: '取消',
      onOk() {
        toOpen1688Pay();
      },
    });
  }

  auto1688storTres.lodingGetShop = true;
  setDefaultApp({
    pType: 1,
    shopId: item.shopId,
  }).then(() => {
    message.success('设置成功');
    auto1688storTres.lodingGetShop = false;
    auto1688storTres.auto1688BindShop();
  });
}
async function deleteBindShop(item: any) {
  // console.log('item', item);
  // return;
  auto1688storTres.lodingGetShop = true;
  const res = await deleteBind1688ShopApi({
    tbId: item.tbId,
  });
  auto1688storTres.lodingGetShop = false;

  if (res) {
    message.success('删除成功');
    auto1688storTres.auto1688BindShop();
  }
}
</script>

<template>
  <div class="px-4 py-4">
    <a-spin :spinning="auto1688storTres.lodingGetShop">
      <a-space class="w-full" direction="vertical">
        <a-space>
          <h2 class="font-bold">1688平台授权</h2>
          <a-button type="primary" @click="toBuy1688App">添加1688账号</a-button>
        </a-space>
        <a-table
          :columns="columns1688"
          :data-source="dataIn1688"
          :pagination="false"
        >
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'remainingTain'">
              <a-space>
                <div v-if="text > 0">剩余:{{ text }}天</div>
                <div v-else>已过期</div>
                <a-button type="link" @click="toBuy1688App">
                  {{ text > 0 ? '续订' : '去订购' }}
                </a-button>
              </a-space>
            </template>
            <template v-if="column.dataIndex === 'isUseingName'">
              <a-space>
                <span v-if="record.isUseing === 1"> 使用中 </span>
                <a-button
                  v-else
                  size="small"
                  type="primary"
                  @click="() => setMoren(record)"
                >
                  设为默认
                </a-button>
              </a-space>
            </template>

            <template v-if="column.dataIndex === 'status'">
              <a-space>
                <div v-if="text === 1">&nbsp;&nbsp;&nbsp;已授权</div>
                <a-space v-if="text === 0">
                  <div>未授权</div>
                  <a-button type="link" @click="toBuy1688App">
                    去授权
                  </a-button>
                </a-space>
                <!-- <a-button type="link" @click="toBuy1688App">
                  {{ text === 0 ? '去授权' : '' }}
                </a-button> -->
              </a-space>
            </template>

            <template v-if="column.dataIndex === 'isvOpenPay'">
              <a-space>
                <!-- <div v-if="text === '1'">&nbsp;&nbsp;&nbsp;已开通</div> -->

                <a-button :disabled="text" type="link" @click="toOpen1688Pay">
                  {{ !text ? '去开通' : '已开通' }}
                </a-button>
              </a-space>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-tooltip
                :title="
                  record.isUseing === 1 ? '当前账号正在使用中 不可以删除' : ''
                "
                placement="topRight"
              >
                <a-button
                  :disabled="record.isUseing === 1"
                  danger
                  type="primary"
                  @click="() => deleteBindShop(record)"
                >
                  删除
                </a-button>
              </a-tooltip>
            </template>
          </template>
        </a-table>

        <h2 class="font-bold">
          <a-space>
            <span> 下游平台授权 </span>
            <a-button type="primary" @click="toBuyDYXianDanApp">
              添加店铺
            </a-button>
          </a-space>
        </h2>

        <a-table
          :columns="puhuoAndOrder"
          :data-source="addShopIdList"
          :pagination="false"
          class="w-full"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'banjia'">
              <a-space v-if="record.dypuhuo" direction="vertical">
                <div v-if="record.dypuhuo.remainingTain > 0">
                  剩余:{{ record.dypuhuo.remainingTain }}天
                </div>
                <div v-else style="color: crimson">已过期</div>
                <a-space>
                  <a-button
                    style="padding-left: 0"
                    type="link"
                    @click="toDYPuHuoApp"
                  >
                    {{ record.dypuhuo.remainingTain > 0 ? '续订' : '去订购' }}
                  </a-button>
                  <a-button
                    style="padding-left: 0"
                    type="link"
                    @click="toDYPuHuoSQ"
                  >
                    授权
                  </a-button>
                </a-space>
                <a-space>
                  <a-button
                    size="small"
                    type="primary"
                    @click="
                      async () => {
                        console.log(record);
                        await router.push({
                          name: 'AddProductConf',
                          query: {
                            shopId: record.shopId,
                          },
                        });
                      }
                    "
                  >
                    铺货设置
                  </a-button>

                  <a-button
                    danger
                    size="small"
                    type="primary"
                    @click="() => deleteBindShop(record.dypuhuo)"
                  >
                    删除
                  </a-button>
                </a-space>
              </a-space>
              <a-space v-else direction="vertical">
                <div style="color: crimson">未订购</div>
                <a-space>
                  <a-button
                    style="padding-left: 0"
                    type="link"
                    @click="toDYPuHuoApp"
                  >
                    去订购
                  </a-button>
                  <a-button
                    style="padding-left: 0"
                    type="link"
                    @click="toDYPuHuoSQ"
                  >
                    授权
                  </a-button>
                </a-space>
              </a-space>
            </template>
            <template v-if="column.dataIndex === 'xiadang'">
              <a-space v-if="record.dyorder" direction="vertical">
                <div v-if="record.dyorder.remainingTain > 0">
                  剩余:{{ record.dyorder.remainingTain }}天
                </div>
                <div v-else style="color: crimson">已过期</div>
                <a-space>
                  <a-button
                    style="padding-left: 0"
                    type="link"
                    @click="toBuyDYXianDanApp"
                  >
                    {{ record.dyorder.remainingTain > 0 ? '续订' : '去订购' }}
                  </a-button>
                  <a-button
                    style="padding-left: 0"
                    type="link"
                    @click="toDYXianDanSQ"
                  >
                    授权
                  </a-button>
                </a-space>
                <a-space>
                 
                  <a-button
                    danger
                    size="small"
                    type="primary"
                    @click="() => deleteBindShop(record.dyorder)"
                  >
                    删除
                  </a-button>
                </a-space>
              </a-space>
              <a-space v-else direction="vertical">
                <div style="color: crimson">未订购</div>
                <a-space>
                  <a-button
                    style="padding-left: 0"
                    type="link"
                    @click="toBuyDYXianDanApp"
                  >
                    去订购/授权
                  </a-button>
                  <!-- <a-button
                    style="padding-left: 0"
                    type="link"
                    @click="toDYXianDanSQ"
                  >
                    授权
                  </a-button> -->
                </a-space>
                
              </a-space>
            </template>
          </template>
          <!-- <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'remainingTain'">
            <a-space>
              <div v-if="text > 0">剩余:{{ text }}天</div>
              <div v-else>已过期</div>
              <a-button type="link" @click="toDYPuHuoApp">
                {{ text > 0 ? '续订' : '去订购' }}
              </a-button>
            </a-space>
          </template>

          <template v-if="column.dataIndex === 'status'">
            <a-space>
              <div v-if="text === 1">&nbsp;&nbsp;&nbsp;已授权</div>
              <a-button type="link" @click="toDYPuHuoSQ">
                {{ text === 0 ? '去授权' : '' }}
              </a-button>
            </a-space>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button
              type="link"
              @click="
                async () => {
                  console.log(record);
                  await router.push({
                    name: 'AddProductConf',
                    query: {
                      shopId: record.shopId,
                    },
                  });
                }
              "
            >
              铺货设置
            </a-button>
          </template> -->
        </a-table>
        <!-- </a-space>
</div>
</template> -->
        <!-- </a-table> -->

        <!-- <a-space>
        <a-tag>铺货应用</a-tag>
        <a-button size="small" type="primary" @click="toDYPuHuoApp">
          添加店铺
        </a-button>
      </a-space>
      <a-table
        :columns="columnsDouDian"
        :data-source="dataInxiayou"
        :pagination="false"
        class="w-full"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'remainingTain'">
            <a-space>
              <div v-if="text > 0">剩余:{{ text }}天</div>
              <div v-else>已过期</div>
              <a-button type="link" @click="toDYPuHuoApp">
                {{ text > 0 ? '续订' : '去订购' }}
              </a-button>
            </a-space>
          </template>

          <template v-if="column.dataIndex === 'status'">
            <a-space>
              <div v-if="text === 1">&nbsp;&nbsp;&nbsp;已授权</div>
              <a-button type="link" @click="toDYPuHuoSQ">
                {{ text === 0 ? '去授权' : '' }}
              </a-button>
            </a-space>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button
              type="link"
              @click="
                async () => {
                  console.log(record);
                  await router.push({
                    name: 'AddProductConf',
                    query: {
                      shopId: record.shopId,
                    },
                  });
                }
              "
            >
              铺货设置
            </a-button>
          </template>
        </template>
      </a-table>

      <a-space>
        <a-tag>下单应用</a-tag>
        <a-button size="small" type="primary" @click="toBuyDYXianDanApp">
          添加店铺
        </a-button>
      </a-space>
      <a-table
        :columns="columnsDouDian"
        :data-source="dataInxiayouPayOrder"
        :pagination="false"
      >
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'remainingTain'">
            <a-space>
              <div v-if="text > 0">剩余:{{ text }}天</div>
              <div v-else>已过期</div>
              <a-button type="link" @click="toBuyDYXianDanApp">
                {{ text > 0 ? '续订' : '去订购' }}
              </a-button>
            </a-space>
          </template>

          <template v-if="column.dataIndex === 'status'">
            <a-space>
              <div v-if="text === 1">&nbsp;&nbsp;&nbsp;已授权</div>
              <a-button type="link" @click="toDYXianDanSQ">
                {{ text === 0 ? '去授权' : '' }}
              </a-button>
            </a-space>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-space>
            </a-space>
          </template>
        </template>
      </a-table> -->
      </a-space>
    </a-spin>
  </div>
</template>
